<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文本框排他变色</title>
</head>

<body>
  <div id="box">
    <input type="text" value="1">
    <input type="text" value="2">
    <input type="text" value="3">
    <input type="text" value="4">
    <input type="text" value="5">
    <input type="text" value="6">
    <input type="text" value="7">
    <input type="text" value="8">
    <input type="text" value="9">
    <input type="text" value="10">
  </div>

  <script>
    // 题目：有一组文本框，要求让每一个文本框在自己输入的时候，背景显示灰色，其他文本框显示白色。
    //思路：使用排他思想，另外可以使用事件委托，把事件委托给文本框的父级

    // 获取父级元素box
    var box = document.getElementById('box'),
      //获得box元素下面全部input标签
      inps = box.children;

    //事件委托，把点击input的事件委托给box
    box.onclick = function (e) {
      // 兼容写法
      var e = e || window.event,
        me = e.target || e.srcElement;
      //排他思想，先把所有input背景设为白色，再把自己的背景设为灰色
      //调用函数 ，清除所有背景色
      huifu();
      //把自己的背景设为灰色
      me.style.backgroundColor = '#ccc'
    }

    //功能：全部input标签背景设为白色
    function huifu() {
      for (let i = 0; i < inps.length; i++) {
        inps[i].style.backgroundColor = '#fff';
      }
    }
  </script>
</body>

</html>